﻿@page "/chart/date-time-category-axis"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the rendering of the DateTime Category Axis in the chart, with an analysis of the sales of the product on different business days.</p>
</SampleDescription>
<ActionDescription>
    <p>The DateTime Category Axis is used to display date time values with non-linear intervals. For example, business days alone can be depicted here in a week.</p>
    <p><code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
    <p>More information about the DateTime Category Axis can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/chart/date-time-axis/#datetimecategory-axis'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfChart Title="Sales comparison of a Product">
        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
        <ChartPrimaryXAxis Title="Business Days" IntervalType="IntervalType.Days" Format="d ddd" ValueType="Syncfusion.Blazor.Charts.ValueType.DateTimeCategory" EdgeLabelPlacement="EdgeLabelPlacement.Shift">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
            <ChartStriplines>
                <ChartStripline Visible="true" Start="new DateTime(2017, 12, 20)" End="new DateTime(2017, 12, 27)" Color="skyblue" Opacity="0.5"></ChartStripline>
                <ChartStripline Visible="true" Start="new DateTime(2018, 1, 2)" End="new DateTime(2018, 1, 8)" Color="pink" Opacity="0.5"></ChartStripline>
            </ChartStriplines>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis Minimum="0" Maximum="100" Interval="20" LabelFormat="{value}M" RangePadding="ChartRangePadding.None">
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
            <ChartAxisMinorTickLines Width="0"></ChartAxisMinorTickLines>
        </ChartPrimaryYAxis>
        <ChartTooltipSettings Enable="true"></ChartTooltipSettings>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@ChartPoints" XName="Period" YName="Sales" Opacity="1" Name="Product" Width="2" Type="ChartSeriesType.Column">
            </ChartSeries>
        </ChartSeriesCollection>
        <ChartAnnotations>
            <ChartAnnotation X="new DateTime(2017,12,22)" Y="90" CoordinateUnits="Units.Point">
                <ContentTemplate><div style="color:#FF0000;font-family: bold; font-weight: 600">Christmas Offer<br> Dec 2017</div></ContentTemplate>
            </ChartAnnotation>
            <ChartAnnotation X="new DateTime(2018,01,04)" Y="90" CoordinateUnits="Units.Point">
                <ContentTemplate><div style="color:#FF0000;font-family: bold; font-weight: 600">New Year Offer<br> Jan 2018</div></ContentTemplate>
            </ChartAnnotation>
        </ChartAnnotations>
        <ChartLegendSettings Visible="false"></ChartLegendSettings>
    </SfChart>
</div>

@code{

    private Theme Theme { get; set; }
    public List<DateTimeData> ChartPoints { get; set; } = new List<DateTimeData>
    {
        new DateTimeData { Period = new DateTime(2017, 12, 20), Sales = 21},
        new DateTimeData { Period = new DateTime(2017, 12, 21), Sales = 24 },
        new DateTimeData { Period = new DateTime(2017, 12, 22), Sales = 24},
        new DateTimeData { Period = new DateTime(2017, 12, 26), Sales = 70},
        new DateTimeData { Period = new DateTime(2017, 12, 27), Sales = 75 },
        new DateTimeData { Period = new DateTime(2018, 1, 2), Sales = 82 },
        new DateTimeData { Period = new DateTime(2018, 1, 3), Sales = 53 },
        new DateTimeData { Period = new DateTime(2018, 1, 4), Sales = 54 },
        new DateTimeData { Period = new DateTime(2018, 1, 5), Sales = 53},
        new DateTimeData { Period = new DateTime(2018, 1, 8), Sales = 45 }
    };

    protected override void OnInitialized()
    {
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    public class DateTimeData
    {
        public DateTime Period { get; set; }
        public double Sales { get; set; }
    }
}
